<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" @clickLeftBack="clickLeftBack" :title="$t('slottedAsh.slottedAshIn')"
				@clickRight="clickRight" scanType="1" rightType="1"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{ $t('translationImage.materialsInformation') }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialCoded') }}：</text>{{
							data.barcodeList.barcode }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text>{{
							data.barcodeList.materialCode }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{
							data.barcodeList.materialName }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{
							data.barcodeList.materialSpec }}
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{ data.barcodeList.unit
							}}
						</view>
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('finishInventory.stockQty') }}：</text>{{
								data.barcodeList.currentQty }}
						</view>
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('slottedAsh.currentStorageQuantity') }}：</text>{{
							data.barcodeList.changeQty }}
					</view>
				</view>
				<!-- 输入数量模块 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{ $t('smashRemoval.currentInputQuantity') }}
					</view>
					<!-- <view class="gui-form-item" >
						<text class="item-info-title">barCode：</text>{{data.FSBarcode}}
					</view> -->
					<view class="custom-card-scan" style="margin-top:20rpx;">
						<text class="item-info-title"><text class="required-color">*</text>{{
							$t('slottedAsh.incomingQty') }}：</text>
						<uni-easyinput class="uni-mt-5" v-model="data.barcodeNumber"
							:placeholder="$t('slottedAsh.currentStorageQuantity')" type="number" @blur="changeQty">
						</uni-easyinput>
					</view>
				</view>
				<!-- 底部操作栏 -->
				<view class="page-bottom">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="submit">
						{{ $t('calendar.submit') }}
					</view>
				</view>

				<!-- 弹框填写数量 -->
				<uni-popup ref="inputDialog" type="center">
					<view class="input-dialog-box">
						<view class="input-dialog-content">
							<view class="input-dialog-item">
								{{ $t('distributedEnter.materialCode') }}：{{ data.barcodeList.barcode }}
							</view>
							<view class="input-dialog-item">
								{{ $t('distributedEnter.materialName') }}：{{ data.barcodeList.materialName }}
							</view>
							<view class="input-dialog-item" style="padding:20rpx 0;font-weight: 600;color:red">
								{{ $t('hardware.thisWarehousingQty') }}：{{ data.barcodeList.changeQty }}
							</view>

						</view>
						<view class="input-dialog-footer">
							<view class="input-dialog-button" @click="cancelFn">
								{{ $t('popup.cancel') }}
							</view>
							<view class="input-dialog-button dialog-button-left" @click="confirmFn">
								{{ $t('popup.confirm') }}
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { navigate } from '@/utils/routerSkip.js';
import { selectWmsBarcodeInfoWms, slottedAshInstock } from '@/api/api.js'
import { onBackPress } from '@dcloudio/uni-app';
import { useStore } from "vuex";
import pdaScan from '@/hooks/pdaScan.js'
//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// slottedAshInList
let store = useStore()
const { scan } = pdaScan()

let data = reactive({
	id: '',// 上级界面传过来的id
	salesOrders: '', // 销售订单号
	barcodeNumber: null,
	value: ['0'],
	enterDetails: {},
	FSBarcode: '',
	barcodeList: {}
})

onMounted(() => {
	selectBarcodeList()
})

const selectBarcodeList = () => {
	//调用接口，查询条码信息
	let parmes = {
		receiptId: data.id,
		asnHId: data.id,
		barcode: "DUSTCARD",
		selectType: 'salesOut',
		isFs: 1,
	}
	selectWmsBarcodeInfoWms(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '开槽灰入库'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_LOOK
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		console.log(res)
		if (res.status == 200) {
			data.barcodeList = res.data; //存储获取的物料信息
		} else {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		}
	})
}

// 条码数量失去焦点或者回车时执行
const changeQty = () => {
	if (data.barcodeNumber <= 0) {
		uni.showToast({
			title: t('smashRemoval.pleaseEnterQty'),
			icon: 'none'
		})
		return
	}
	// 将数量添加的条码中
	data.barcodeList.changeQty = data.barcodeNumber
}

//页面弹框输入数量使用的变量
let inputDialog = ref(null);

// 提交
const submit = () => {
	if (data.barcodeNumber <= 0) {
		uni.showToast({
			title: t('smashRemoval.pleaseEnterQty'),
			icon: 'none'
		})
		return
	}
	inputDialog.value.open();//打开弹框
}

const confirmFn = () => {
	let parmes = {
		wmsBarcodes: [{
			id: data.barcodeList.id,
			changeQty: data.barcodeList.changeQty,
			materialCode: data.barcodeList.materialCode
		}]
	}
	uni.showLoading({
		title: 'loading',
		mask: true
	});
	slottedAshInstock(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '开槽灰入库'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_COMMIT
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res.status == 200) {
			//隐藏加载框
			uni.hideLoading();
			uni.showToast({ title: t('smashRemoval.barCodeSubmission') });
			data.barcodeNumber = 0
			inputDialog.value.close();
			selectBarcodeList()
		}
	})
}

// 弹框的取消按钮
const cancelFn = () => {
	inputDialog.value.close();
}
// 历史记录
const clickRight = () => {
	navigate({
		url: '/pages/slottedAsh/slottedAshInRecord'
	})
}

//点击物理按键的返回
onBackPress((options) => {
	if (options.from == 'backbutton') {
		if (!data.barcodeList.length) {
			uni.navigateBack({
				delta: 1
			});
			return true
		}
		uni.showModal({
			title: t('smashRemoval.warmPrompt'),
			content: t('materials.unsubmittedDataIn'),
			success: function (res) {
				if (res.confirm) {
					//清除store 里面的数据
					// store.commit("clearSlottedAshInList");
					uni.navigateBack({
						delta: 1
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		return true;
	}
})
//导航栏左侧返回
const clickLeftBack = () => {
	if (!data.barcodeList.length) {
		uni.navigateBack({
			delta: 1
		});
		return
	}
	uni.showModal({
		title: t('smashRemoval.warmPrompt'),
		content: t('materials.clearedIfReturned'),
		success: function (res) {
			if (res.confirm) {
				// store.commit('clearSlottedAshInList')
				uni.navigateBack({
					delta: 1
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
</script>

<style lang="scss" scoped>
.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);

	// height: 100vh;
}
</style>